.register-container {
  display: flex;
  width: 100%;
  height: 100vh;
  .post {
    width: 42.86%;
    background-image: url("../assets/post.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  
  .underline {
    text-decoration: underline;
  }
  .log-shell {
    // padding: 0px 40px 30px 0px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: 57.14%;
    background-color: #fbfbfb;
    // margin: 0 auto;
    // border-radius: 8px;
    // box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    // 顶部菜单
    .menu {
      text-align: right;
      margin-right: -40px;
      .close-icon {
        cursor: pointer;
        width: 17px;
        height: 17px;
        padding: 8px;
        color: #788a92;
        &:hover {
          background-color: red;
          color: #e0e1e6;
        }
      }
    }
    .top,
    .middle,
    .identity,
    // 顶部样式
    .top {
      display: flex;
      align-items: center;
      color: #e0e1e6;
      margin: 20px 0px 6px 0px;
      .logo {
        img {
          width: 44px;
          height: 44px;
        }
      }
      .l-name {
        background: linear-gradient(
          to right bottom,
          rgb(77, 220, 58),
          rgb(147, 248, 88)
        );
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        margin-left: 4px;
        span {
          font-size: 24px;
          font-weight: bold;
          letter-spacing: 3px;
        }
        sup {
          font-size: 9px;
          vertical-align: top;
        }
      }
    }
    .identity {
      display: flex;
      justify-content: space-between;
      width: 420px;
      margin: 10px 0px;
      div {
        width: 42%;
        height: 40px;
        line-height: 40px;
        text-align: center;
        background-color: #eee;
        color: #666;
        font-weight: bold;
        border-radius: 4px;
        cursor: pointer;
        transition: all 0.3s;
        &:hover {
          background-color: #e0e0e0;
        }
        &.active {
          background-color: #3ac21b;
          color: #fff;
        }
      }
    }
    
    // 顶部导航栏样式
    .nav-tabs {
      display: flex;
      justify-content: center; // 水平居中
      // margin: 20px auto; // 修改为上下边距20px，左右自动
      
      .tab {
        margin: 10px 4px;
        padding: 0px 14px;
        cursor: pointer;
        font-size: 20px;
        color: #666;
        position: relative;
        
      //   margin-right: 20px;
        
        &.active {
          color: #4ddc3a;
          font-weight: bold;
          
          &:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 10%;
            width: 80%;
            height: 2px;
            background-color: #4ddc3a;
          }
        }
        
        &:hover {
          color: #4ddc3a;
        }
      }
    }
    
    // 中部样式
    .middle {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      flex: 1; // 占用剩余空间
      .register-form {
        text-align: left;
        display: flex;
        flex-direction: column;
        .inp {
          text-align: left;
          display: flex;
          flex-direction: column;
          margin-top: 11px;
          .label-error-container {
            display: flex;
            justify-content: space-between;
          }
          .label {
            font-size: 12px;
            color: #afafaf;
          }
          input {
            background-color: #f9f9f9;
            width: 384px;
            height: 38px;
            border-radius: 2px;
            color: #222;
            outline: none;
            border: 1px solid #ddd;
            text-indent: 10px;
            font-size: 14px;
            transition: border 0.3s;
            &.input-error {
              border: 1px solid #ff4d4f;
            }
            &.input-success {
              border: 1px solid #52c41a;
            }
          }
  
          .error-msg {
            color: #ff4d4f;
            font-size: 12px;
          }
        }
        .memory {
          margin-top: 10px;
          display: flex;
          align-items: center;
          cursor: pointer;
          user-select: none;
          span {
            vertical-align: middle;
            font-size: 12px;
            color: #afafaf;
          }
          .sel-icon {
            margin-right: 6px;
            width: 15px;
            height: 15px;
            padding: 2px;
            color: #32353c;
            border: 1px solid #999;
            border-radius: 2px;
          }
          &:hover .sel-icon {
            background-color: #393c44;
            color: #393c44;
          }
        }
        .bnt {
          margin-top: 22px;
          button {
            cursor: pointer;
            width: 100%;
            height: 44px;
            color: #fff;
            border: none;
            outline: none;
            font-size: 15px;
            border-radius: 2px;
            background-image: linear-gradient(
              to right,
              rgb(77, 220, 58),
              rgb(147, 248, 88)
            );
            &:hover {
              background-image: linear-gradient(
                to right,
                rgb(77, 220, 58),
                rgb(58, 220, 99) 30%,
                rgb(147, 248, 88)
              );
            }
          }
        }
      }
      .m-right {
        .r-top {
          font-size: 18px;
          font-weight: bold;
          color: #333;
          margin-bottom: 10px;
        }
        .r-bottom {
          display: block;
          margin-top: 10px;
          color: #666;
        }
        .r-bottom:hover {
          color: #19ff38;
          font-size: 20px;
        }
        .im {
          width: 300px;
          height: 250px;
          background-image: url(../assets/reg.png);
          background-size: cover;
          background-position: center;
          border-radius: 10px;
          margin: 6px 0px 8px 0px;
          display: flex;
          flex-direction: column;
          align-items: center;
          // justify-content: center;
          img {
            width: 50px;
            height: 50px;
            padding: 6px;
          }
        }
      }
    }
    // 底部样式
    .bottom {
      padding-top: 10px;
      font-size: 12px;
      color: #777;
      display: flex;
      justify-content: space-between;
    }
  }
}

